<template>
  <div class="cell-editor">
    <el-date-picker
      ref="input"
      v-model="value"
      type="date"
      :format="params.format || 'yyyy-MM-dd'"
      :value-format="params.valueFormat || 'yyyy-MM-dd'"
      align="right"
      @change="select"
      @blur="blur"
    />
  </div>
</template>

<script>

export default {
  name: 'DatePickerCellEditor',
  data() {
    return {
      value: ''
    }
  },
  created() {
    this.setInitialState(this.params)
  },
  mounted() {
    if (!this.params.cellStartedEdit) return
    this.$nextTick(() => {
      const input = this.$refs.input
      input.focus()
    })
  },
  methods: {
    getValue() {
      return this.value
    },
    focusIn() {
      const input = this.$refs.input
      input.focus()
    },
    // private
    setInitialState(params) {
      this.value = params.value
    },
    select(value) {
      if (this.params.select) {
        this.params.select(this.params.node, value)
      }
    },
    blur() {
      this.params.stopEditing()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
